<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">用户主页</block>
		</cu-custom>
		<view class="cu-card dynamic no-card">
			<view class="cu-item shadow">
				<view class="top-bg" :style="'background-image:url('+simpleUserInfo.avatar+');'"></view>
				<view class="flex-direction justify-center align-center top-card">
					<view class="cu-avatar round lg margin-top"
						:style="'background-image:url('+simpleUserInfo.avatar+');'">
					</view>
					<view class="content flex-sub text-center margin-top top-text">
						<view>{{simpleUserInfo.nickname}}</view>
						<view class="text-gray text-sm flex justify-between margin-top">
							{{simpleUserInfo.createTime}}
						</view>
						<button class="cu-btn round shadow margin-top sm" :class="isFollowed ? 'bg-gray' : 'bg-blue'"
							@click="handleClickFollowButton">
							<text class="lg cuIcon-add margin-lr-xs"></text>
							关注
						</button>
					</view>
				</view>
			</view>
			<view class="cu-list menu">
				<view class="cu-item margin-top">
					<view class="content flex justify-center"><text class="text-grey text-center">作品</text></view>
				</view>
			</view>
			<view class="content cu-list bg-white">
				<view class="cu-item flex padding solid-bottom item-box" v-for="(item, index) in imagesPageInfo.records"
					:key="index" @click="toImageDetails(item.id)">
					<image :src="item.url" mode="aspectFill" class="flex-sub shadow radius margin-right-xs item-image"
						@click.stop="previewImage(item.url)"></image>
					<view class="action flex-twice content-box">
						<view class="text-bold nowrap">{{ item.title }}</view>
						<view class="text-sm text-gray desc-box">{{ item.description }}</view>
					</view>
				</view>
			</view>
			<view class="padding text-center text-gray" v-show="showNoMore">没有更多内容了哦......</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getSimpleUserInfoByIdApi,
		fetchImagesApi,
		doFollowUser,
		cancelFollowUser,
		fetchUserInfoApi
	} from '../../api/http.js';
	import {
		checkTokenInStore
	} from '../../permission/index';
	export default {
		data() {
			return {
				simpleUserInfo: {},
				imagesPageInfo: {
					current: 1,
					size: 5,
					records: [],
					total: 0
				},
				userId: null,
				showNoMore: false
			};
		},
		onLoad(option) {
			checkTokenInStore();
			const userId = option.id;
			this.userId = userId;
			getSimpleUserInfoByIdApi(userId)
				.then(res => {
					this.simpleUserInfo = res.data
				});
			this.refreshImages();
		},
		onReachBottom() {
			if (this.imagesPageInfo.current * this.imagesPageInfo.size >= this.imagesPageInfo.total) {
				this.showNoMore = true;
				return;
			}
			this.fetchImages({
				page: this.imagesPageInfo.current + 1,
				limit: this.imagesPageInfo.size,
				createdBy: this.userId
			});
		},
		computed: {
			...mapState({
				userInfo: state => state.userInfo,
				token: state => state.token
			}),
			isFollowed: function() {
				const res = this.userInfo.followedUserIds.findIndex((ele) => {
					return ele === this.simpleUserInfo.id
				}) !== -1;
				return res;
			}
		},
		methods: {
			...mapMutations(['setUserInfo']),
			cutLongText() {
				this.imagesPageInfo.records.forEach(item => {
					if (item.description.length > 70) {
						item.description = item.description.substring(0, 72) + '...';
					}
				});
			},
			fetchImages(param) {
				fetchImagesApi(param).then(res => {
					const _info = res.data;
					this.imagesPageInfo.current = _info.current;
					this.imagesPageInfo.size = _info.size;
					this.imagesPageInfo.records = this.imagesPageInfo.records.concat(_info.records);
					this.imagesPageInfo.total = _info.total;
					this.cutLongText();
				});
			},
			refreshImages() {
				this.imagesPageInfo = {
					current: 1,
					size: 5,
					records: [],
					total: 0
				};
				this.fetchImages({
					page: this.imagesPageInfo.current,
					limit: this.imagesPageInfo.size,
					createdBy: this.userId
				});
			},
			toImageDetails(id) {
				uni.navigateTo({
					url: '../image_details/image_details?id=' + id
				});
			},
			handleClickFollowButton() {
				const data = {
					followedUserId: this.simpleUserInfo.id,
					userId: this.userInfo.id
				}
				if(data.followedUserId === data.userId) {
					uni.showToast({
						icon:"none",
						title:"不可关注自己"
					});
					return
				}
				if (this.isFollowed) {
					cancelFollowUser(data).then(res => {
						fetchUserInfoApi({
							token: this.token
						}).then(res => {
							this.setUserInfo(res.data);
							uni.showToast({
								title: "取消关注成功"
							})
						});
					})
				} else {
					doFollowUser(data).then(res => {
						fetchUserInfoApi({
							token: this.token
						}).then(res => {
							this.setUserInfo(res.data);
							uni.showToast({
								title: "关注成功"
							})
						});
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 490rpx;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		z-index: 0;
	}

	.top-bg::after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: inherit;
		filter: blur(5px);
		z-index: 0;
	}

	.top-card {
		display: flex;
		z-index: 1;
		height: 400rpx;
	}

	.top-text {
		z-index: 1;
	}

	.item-box {
		height: 200rpx;

		.item-image {
			height: 150rpx;
		}

		.content-box {
			width: 400rpx;
			.nowrap {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}

	.cu-list {
		margin-top: 0;
	}
</style>
